<template>
  <div class="box">
    <div id="3dPie" ref="echart" class="echartDiv" @click="clickChart"></div>

    <span class="unit" v-if="isShowUnit">单位: {{ unit }}</span>
  </div>
</template>

<script setup lang="js">
import * as echarts from 'echarts'
import 'echarts-gl'
import { onMounted, toRefs, ref, reactive } from 'vue'

const props = defineProps({
  value: Object,
  isShowUnit: null
})

const echart = ref(null)


// 传入数据生成 option
const optionsData = [
  { name: '待办', value: 4256 },
  { name: '已办', value: 2356 },
  { name: '未处理', value: 2018 },
  { name: '忽略', value: 1998 }
]

// watch(() => props.value,
//   (newVal, oldVal) => {
//     unit.value = newVal.unit
//     let data = newVal.data
//     options.series[0].data = data
//     if (data) {
//       // echartInit()
//     }
//   },
//   {
//     deep: true,
//     // immediate: true
//   }
// )

//挂载
onMounted(() => {
  echartInit()
})

const echartInit = () => {
  var myChart = echarts.init(echart.value)
  const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5)
  series.push({
    name: 'pie2d',
    type: 'pie',

    label: {
      show: false,
      opacity: 1,
      fontSize: 14,
      lineHeight: 20,
      fontSize: 14,
      color: '#fff',
    },
    labelLine: {
      show: false,
      length: 30,
      length2: 30,
    },
    startAngle: -30, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ['40%', '60%'],
    center: ['50%', '50%'],
    data: optionsData,
    itemStyle: {
      opacity: 0,
      colors: [
        'rgb(245, 138, 221)',
        'rgb(224, 85, 85)',
        'rgb(106, 240, 177)',
        'rgb(247, 183, 56)',
        'rgb(137, 240, 106)',
        'rgb(9, 117, 240)',
        'rgb(227, 233, 240)'
      ],
    },
  })

  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    legend: {
      show: true,
      tooltip: {
        show: true,
      },
      orient: 'vertical',
      data: ['待办', '已办', '未处理', '忽略'],
      top: 'center',
      itemGap: 14,
      itemHeight: 8,
      itemWidth: 17,
      right: '2%',
      color: '#fff',
      fontSize: 10,
    },
    animation: true,
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== 'mouseoutSeries' &&
          params.seriesName !== 'pie2d'
        ) {
          return `${params.seriesName
            }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
            };"></span>${option.series[params.seriesIndex].pieData.value + '人'
            }`
        }
      },
      fontSize: 14,
    },
    title: {
      x: 'center',
      top: '20',
      color: '#fff',
      fontSize: 14,
    },
    // backgroundColor: '#0E3567',
    labelLine: {
      show: false,
      lineStyle: {
        color: '#7BC0CB',
      },
      show: true,
      length: 10,
      length2: 10,
    },
    label: {
      show: false,
      position: 'outside',
      formatter: '{b} \n{d}%',
      color: '#fff',
      fontSize: '14px',
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.01,
      //top: '30%',
      bottom: '50%',
      // environment: "images/guang-quan.png",
      viewControl: {
        distance: 180,
        alpha: 25,
        beta: 60,
        autoRotate: true, // 自动旋转
      },
    },
    series: series,
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2

  let startRadian = startRatio * Math.PI * 2
  let endRadian = endRatio * Math.PI * 2
  let midRadian = midRatio * Math.PI * 2

  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false
  }

  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u, v) {
      if (u < startRadian) {
        return (
          offsetX +
          Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        )
      }
      if (u > endRadian) {
        return (
          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        )
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
    },

    y: function (u, v) {
      if (u < startRadian) {
        return (
          offsetY +
          Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        )
      }
      if (u > endRadian) {
        return (
          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        )
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
    },

    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u)
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u)
      }
      return Math.sin(v) > 0 ? 1 * height : -1
    },
  }
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
  let series = []
  let sumValue = 0
  let startValue = 0
  let endValue = 0
  let legendData = []
  let k =
    typeof internalDiameterRatio !== 'undefined'
      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
      : 1 / 3

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value

    let seriesItem = {
      name:
        typeof pieData[i].name === 'undefined'
          ? `series${i}`
          : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: k,
      },
    }

    if (typeof pieData[i].itemStyle != 'undefined') {
      let itemStyle = {}

      typeof pieData[i].itemStyle.color != 'undefined'
        ? (itemStyle.color = pieData[i].itemStyle.color)
        : null
      typeof pieData[i].itemStyle.opacity != 'undefined'
        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
        : null

      seriesItem.itemStyle = itemStyle
    }
    series.push(seriesItem)
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value
    // console.log(series[i])
    series[i].pieData.startRatio = startValue / sumValue
    series[i].pieData.endRatio = endValue / sumValue
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      series[i].pieData.value,
    )

    startValue = endValue

    legendData.push(series[i].name)
  }
  return series
}

function clickChart() {

}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

#3dPie {
  width: 100%;
  height: 100%;
}

.unit {
  position: absolute;
  left: 10px;
  bottom: 0px;
  color: #fff;
  font-size: 10px;
}
</style>
